<template>
  <div>
    <van-action-sheet
      safe-area-inset-bottom
      v-model:show="show"
      @open="onOpen"
      title="分享"
    >
      <div class="group-head">
        <div class="group-title">链接分享范围</div>
        <div class="copy-link" v-show="enableShareLink" @click="clickCopyLink">
          {{ enablePsw ? "复制链接及密码" : "复制链接" }}
        </div>
      </div>

      <van-cell-group>
        <van-cell>
          <ShareInfoCell
            :title="linkAreaDes"
            inputType="SWITCH"
            isLink
            :checked="enableShareLink"
            @update:checked="toggleLinkSwitch"
            @click="() => (this.showPicker = true)"
          />
        </van-cell>

        <van-cell v-if="enableSharePsw">
          <ShareInfoCell
            title="启用密码"
            inputType="SWITCH"
            :value="shareMeetInfo.sharePassword"
            :checked="enablePsw"
            @update:checked="togglePswSwitch"
          />
        </van-cell>
      </van-cell-group>
      <div class="safe-area-inset-bottom h-[80px]"></div>
    </van-action-sheet>

    <van-popup v-model:show="showPicker" teleport="#minutesPage" round position="bottom">
      <van-picker
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirmLinkArea"
      />
    </van-popup>
  </div>
</template>

<script>
import ShareInfoCell from "./ShareInfoCell.vue";
import { addToClipboard, generateRandomPassword } from "@/utils/stringTool";
import { getShareSettings, shareConferenceMinutes } from "@/services/minutes";
import { showToast, closeToast } from "vant";
import { mapState, mapActions } from "pinia";
import { isIOS } from "@/utils/platformTool";
import { useMinutesStore } from "@/store";

export default {
  name: "ShareView",

  props: {
    showView: Boolean,
  },

  components: {
    ShareInfoCell,
  },

  emits: ["update:showView"],

  data() {
    return {
      showPicker: false,
      linkArea: 0,
      linkAreaDes: "创建人&团队管理者可查看",
      shareMeetInfo: {
        sharedUserIds: [],
        viewOnlyHost: false,
        shareType: "NO_SHARE",
        shareLink: "",
        sharePassword: "",
      },
      columns: [
        {
          text: "创建人&团队管理者",
          value: "NO_SHARE",
        },
        {
          text: "团队内",
          value: "SHARE_IN_TEAM",
        },
        {
          text: "企业内",
          value: "SHARE_IN_INTERNAL",
        },
        {
          text: "互联网上",
          value: "SHARE_TO_INTERNET",
        },
      ],
    };
  },

  methods: {
    // ...mapActions(useMinutesStore, {
    //   setShareMeetInfo: "setShareMeetInfo",
    // }),
    updateShareInfo() {
      this.shareMeetInfo.viewOnlyHost = false;
      if (!this.enableSharePsw) {
        this.shareMeetInfo.sharePassword = "";
      }
      shareConferenceMinutes(this.confId, this.shareMeetInfo).then((response) => {
        closeToast();
        if (response.code !== 0) {
          alert(response.message);
          this.requestShareSettings();
        }
      });
    },

    togglePswSwitch(v) {
      this.shareMeetInfo.sharePassword = v ? generateRandomPassword() : "";
      this.updateShareInfo();
    },

    toggleLinkSwitch(v) {
      if (this.enableShareLink === v) {
        return;
      }
      if (!v) {
        this.shareMeetInfo.shareType = 0;
      } else {
        this.shareMeetInfo.shareType = this.linkArea === 0 ? 1 : 2;
      }
      this.updateShareInfo();
    },

    onConfirmLinkArea(v) {
      if (v === undefined) return;

      let selectedOptions = v.selectedOptions;
      this.linkAreaDes = selectedOptions[0].text + "获得链接的人可查看";
      this.linkArea = selectedOptions[0].value;
      this.shareMeetInfo.shareType = this.linkArea;
      this.showPicker = false;
      this.updateShareInfo();
    },

    selectParticipant() {
      if (this.shareMeetInfo.viewOnlyHost) return;
      this.$router.push("/conferenceMinutes/selectParticipants");
    },

    clickCopyLink() {
      console.log("clickCopyLink: ", this.shareMeetInfo);
      let copyContent = "绚星销售助手云录制分享链接:" + window.location.href;
      if (
        this.shareMeetInfo.sharePassword &&
        this.shareMeetInfo.sharePassword.length > 0
      ) {
        copyContent += "\n密码: " + this.shareMeetInfo.sharePassword;
      }
      addToClipboard(copyContent);

      if (isIOS()) {
        showToast("复制链接成功");
      } else {
        showToast("复制链接成功");
      }
    },

    requestShareSettings() {
      console.log("requestShareSettings :>> ", this.confId);
      if (this.confId === undefined || this.confId.length === 0) {
        return;
      }
      getShareSettings(this.confId).then((data) => {
        this.shareMeetInfo = data;
        this.shareMeetInfo = this.makeH5ShareLink(this.shareMeetInfo);
        this.linkArea = data.shareType === 1 ? 0 : 1;
      });
    },

    makeH5ShareLink(shareInfo) {
      let baseUrl = import.meta.env.VITE_XMATE_BASE_URL;

      const { shareLink } = shareInfo;
      const array = shareLink.split("/");
      const shareId = array[array.length - 1];
      shareInfo.shareLinkOfH5 = `${baseUrl}/#/record/${this.confId}`;
      return shareInfo;
    },

    onOpen() {
      console.log("onOpen: ");
      this.requestShareSettings();
    },
  },

  watch: {
    shareMeetInfo: {
      deep: true,
      handler() {
        // this.setShareMeetInfo(this.shareMeetInfo);
      },
    },
  },

  computed: {
    ...mapState(useMinutesStore, {
      confId: "conferenceId",
      meetInfo: "getMeetInfo",
    }),

    show: {
      set(value) {
        this.$emit("update:showView", value);
      },
      get() {
        return this.showView;
      },
    },

    enablePsw() {
      console.log("enablePsw: ", this.shareMeetInfo.sharePassword);
      return (
        this.shareMeetInfo.sharePassword !== undefined &&
        this.shareMeetInfo.sharePassword.length > 0
      );
    },

    enableSharePsw() {
      if (
        this.shareMeetInfo.shareType === "SHARE_TO_INTERNET" ||
        this.shareMeetInfo.shareType === "SHARE_IN_TEAM" ||
        this.shareMeetInfo.shareType === "SHARE_IN_INTERNAL"
      ) {
        return true;
      }
      return false;
    },

    enableShareLink() {
      return this.shareMeetInfo.shareType !== 0;
    },

    enableShareAttend() {
      // 是否允许分享给参会人
      const { invites, participants } = this.meetInfo.originParticipantInfo;
      return invites.length + participants.length > 0;
    },
  },
};
</script>

<style lang="less" scoped>
.group-title {
  font-size: 12px;
  line-height: 40px;
  color: #8c8c8c;
  vertical-align: middle;
}

.van-cell {
  padding: 0;
}

.group-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding-left: 15px;
  padding-right: 15px;
  background-color: #f5f5f5;
}

.copy-link {
  color: #436bff;
  font-size: 12px;
}
</style>
